<!DOCTYPE HTML>
<HTML>

<HEAD>
    <TITLE>Rotating Ball</TITLE>
</HEAD>

<BODY>
    <DIV>
        <CANVAS ID="canvas" width="400" height="300"> </CANVAS>
    </DIV>

    <SCRIPT type="text/javascript">
        var canvas;
        var ctx;
        var x = 400;
        var y = 300;
        var dx = 2;
        var dy = 4;
        var WIDTH = 400;
        var HEIGHT = 300;

        function circle() {
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.arc(x, y, 10, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.closePath();
        }

        function clear() {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
        }

        function init() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            return setInterval(draw, 10);
        }


        function draw() {
            clear();
            circle();
            if (x > WIDTH || x < 0) {
                dx = -dx;
            }

            if (y > HEIGHT || y < 0) {
                dy = -dy;
            }
            x += dx;
            y += dy;
        }

        init();
    </SCRIPT>
</BODY>

</HTML>